<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		.myBorder {
			width: 80%;
			min-height: 50px;
			border: 1px solid red;
			margin: 5px auto;
			padding: 5px;
		}
	</style>
	<script src="vue.js"></script>
</head>

<body>
	<div id="app">
		<div :class="'myBorder'">
			绑定文本框<br />
			<label>
				姓名：<input type="text" v-model.trim="user" :placeholder="msg" />
			</label>
			<br />
			<label>
				年龄：<input type="number" v-model.number="age" />
			</label>
		</div>
		<div :class="'myBorder'">
			文本域<br />
			<textarea placeholder="听说你的留言最有料" v-model="myText">
				</textarea>
		</div>
		<div :class="'myBorder'">
			单选框<br />
			性别：<br />
			<label>
				男<input type="radio" name="sex" value=0 v-model.number="sex" />
			</label>
			<label>
				女<input type="radio" name="sex" value=1 v-model.number="sex" />
			</label>
		</div>
		<div :class="'myBorder'">
			单个复选框<br />
			<label>
				全选/全不选<input type="checkbox" v-model="myCheckSingle" @click="myFn2" @change="myFn3" />
			</label>
			<br />
			<br />
			<button type="button" @click="notCheck">反选</button>
		</div>
		<div :class="'myBorder'">
			多个复选框<br />
			1908和1909最可爱的人<br />
			<label>
				许<input type="checkbox" value="p1" v-model="myCheckboxS" @change="myIsCheck" />
			</label>
			<label>
				宋<input type="checkbox" value="p2" v-model="myCheckboxS" @change="myIsCheck" />
			</label>
			<label>
				李<input type="checkbox" value="p3" v-model="myCheckboxS" @change="myIsCheck" />
			</label>
			<label>
				王一<input type="checkbox" value="p4" v-model="myCheckboxS" @change="myIsCheck" />
			</label>
			<label>
				张<input type="checkbox" value="p5" v-model="myCheckboxS" @change="myIsCheck" />
			</label>
		</div>
		<div :class="'myBorder'">
			单选下拉列表<br />
			1908和1909最最可爱的人<br />
			<select v-model="mySelect">
				<option value="p1">aa</option>
				<option value="p2">bb</option>
				<option value="p3">cc</option>
				<option value="p4">dd</option>
				<option value="p5">ee</option>
			</select>
		</div>
		<div :class="'myBorder'">
			多选选下拉列表<br />
			1908和1909可爱的人<br />
			<select v-model="mySelects" multiple size="7">
				<option value="p1">aa</option>
				<option value="p2">bb</option>
				<option value="p3">cc</option>
				<option value="p4">dd</option>
				<option value="p5">ee</option>
			</select>
		</div>
		<div :class="'myBorder'">
			<button type="button" @click="myFn1">获取数据</button>
		</div>
	</div>
	<script>
		var app = new Vue({
			el: "#app",
			data: {
				msg: "请输入用户名",
				user: "",
				age: 0,
				sex: 0,
				myText: "",
				myCheckSingle: false,
				myCheckboxS0: ["p1", "p2", "p3", "p4", "p5"],
				myCheckboxS: ["p2"],
				mySelect: "p2",
				mySelects: ["p2", "p4"]
			},
			methods: {
				myFn1() {
					var user = this.user;
					var age = this.age;
					var myText = this.myText;
					console.log("user:", user, "user.length:", user.length, "\nage:", age, "typeof age:", typeof age);
					console.log("myText：", myText);
					var sex = this.sex;
					//						console.log("sex：",sex,"typeof sex:",typeof sex);
					console.log("sex：", sex, sex ? "女士" : "先生");
					var myCheckSingle = this.myCheckSingle;
					console.log("myFn1 myCheckSingle:", myCheckSingle, myCheckSingle ? "选中" : "未选中");
					var myCheckboxS = this.myCheckboxS;
					console.log("myCheckboxS:", myCheckboxS);
					var mySelect = this.mySelect;
					console.log("mySelect:", mySelect);
					var mySelects = this.mySelects;
					console.log("mySelects:", mySelects);
				},
				myFn2() {
					var myCheckSingle = this.myCheckSingle;
					console.log("点击事件 myFn2 myCheckSingle:", myCheckSingle)
				},
				myFn3() {
					var myCheckSingle = this.myCheckSingle;
					console.log("change事件 myFn3 myCheckSingle:", myCheckSingle);
					if (myCheckSingle) {
						this.myCheckboxS = this.myCheckboxS0;
					} else {
						this.myCheckboxS = [];
					}
				},
				notCheck() {
					var self = this;
					var arr = this.myCheckboxS0.filter(function (a) {
						//console.log("a:",a);
						return !self.myCheckboxS.includes(a);
					});
					console.log("反选的结果:", arr);
					this.myCheckboxS = arr;
					this.myIsCheck();

				},
				myIsCheck() {
					var len0 = this.myCheckboxS0.length;
					var len = this.myCheckboxS.length;
					if (len == len0) {
						var f = true
					} else {
						var f = false;
					}
					this.myCheckSingle = f;
				}
			}
		});


		/*			var arr1=["a","b","c","d"];
					//filter是什么意思 将数组中满足我们条件的数据取出来,放入新数组
					//includes 在数组中是否包含指定的值,包含返回true,不包含返回false
					//indexOf(),在数组中是否包含指定的值(从头开始查询数据),包含返回数据在数组中的下标,不包含返回-1
					
					var arr2=["b"];
					
					var arr3=arr1.filter(function(x,y){
						//console.log("x:",x,"y:",y);
						return !arr2.includes(x);
					});
					//console.log("arr3:",arr3);*/
	</script>
</body>

</html>